<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:fragment="commonHeader">
    <script>
        $(function () {
            var treeviewMenu = $('.app-menu');

            // Toggle Sidebar
            $('[data-toggle="sidebar"]').click(function(event) {
                event.preventDefault();
                $('.app').toggleClass('sidenav-toggled');
            });

            // Activate sidebar treeview toggle
            $("[data-toggle='treeview']").click(function(event) {
                event.preventDefault();
                if(!$(this).parent().hasClass('is-expanded')) {
                    treeviewMenu.find("[data-toggle='treeview']").parent().removeClass('is-expanded');
                }
                $(this).parent().toggleClass('is-expanded');

            });

            $("[data-sign]").click(function (e) {
                var $this = $(this);
                var iframe = $("#mainIframe");
                $("[data-sign]").removeClass("active")
                $this.addClass("active");
                iframe.prop("src",$this.attr("href"));
            })

            // Set initial active toggle
            $("[data-toggle='treeview.'].is-expanded").parent().toggleClass('is-expanded');

            //Activate bootstrip tooltips
            $("[data-toggle='tooltip']").tooltip();
        })
    </script>
    <script th:src="@{/static/common/js/popper.min.js}" ></script>
    <script th:src="@{/static/common/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/common/js/plugins/pace.min.js}"></script>
    <script th:src="@{/static/common/js/plugins/chart.js}"></script>
    <link rel="stylesheet" th:href="@{/static/common/css/main-vali.css}">
</header>
</html>